<template>
    <div>
        <swiper class="swiper" ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="item in lunbos" :key="item.id">
                <img :src="item.s_photos[0].path" alt="">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <!--分页器。如果放置在swiper外面，需要自定义样式。-->
            <div class="swiper-button-prev" slot="pagination"></div>
            <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
            <div class="swiper-button-next" slot="pagination"></div>
            <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
        </swiper>
        <!-- 分类的div -->
        <!-- 要实现点击后跳转去product页面而且要带上对应的id -->
        <!-- <ClassifyList v-for=" item in classifies" :key="item.id" :id=item.id/> -->
        <ClassifyList v-for="item in classifies" :key="item.createdAt" :id="item.id" :classify="item" />
        <div class="product" v-for="item in res" :key="item.id">
            <div class="box" v-for="it in arr">
                <!-- 分类标题 -->
                <div class="classify" @click="goProduct(item.id)" >
                    <h1>{{it.name}}</h1>
                    <span>查看更多 <i class="el-icon-arrow-right"></i> </span>
                </div>
                <!-- 对应的商品 -->
                <ul class="content">
                    <li class="good" v-for="i in item" :key="i.id">
                        <img :src="i.s_goods_photos[0].path" alt="">
                        <h3>{{i.name}}</h3>
                        <p>￥{{i.price}}</p>
                        <p>{{i.sale_price}}</p>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</template>

<script>
// 引入商品分类组件 v-for出来
import ClassifyList from "../components/ClassifyList.vue"
// 引入swiper组件
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper"
// 引入swiper样式
import "swiper/css/swiper.css";
import { getLunbo, getClassify, getGoods } from "@/assets/request.js"

export default {
    name: "Index",
    data() {
        return {
            // 配置swiper
            swiperOptions: {
                //切换效果
                // effect:"cube",
                // 自动切换
                autoplay: true,
                // 循环模式
                loop: true,
                // preventClicks : false,
                // 分页器
                pagination: {
                    el: '.swiper-pagination',
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            },
            // 存放轮播图的数组
            lunbos: [],
            // 只截取穿戴内容到GoodCart渲染
            classifies: [],

            // 根据分类存放商品
            goods: [],
            // 存放分类的数组
            arr: [],
            resPhone: [],
            resComputer: [],
            resFlat: [],
            res1: [],
            res2: [],
            res3: [],
            res: [],
        }
    },
    components: {
        Swiper,
        SwiperSlide,
        ClassifyList,
    },
    directives: {
        swiper: directive,
    },
    methods: {
        goProduct(id) {
            this.$route.push({
                name: "product",
                params: {
                    id
                }
            })
        }
    },
    async mounted() {
        // 轮播图
        let lunboRes = await getLunbo({
            // 填写自己项目id
            project_id: 255,
        });
        // 轮播图的数组
        // console.log(lunboRes);
        this.lunbos = lunboRes.data.result;

        // 分类
        let classifyRes = await getClassify({
            project_id: 255,
        })
        // 用过滤方法筛选穿戴的内容
        this.classifies = classifyRes.data.result.filter(item => item.id == 2131)
        // 找到手机 电脑 平板三个内容
        this.arr = classifyRes.data.result
        this.arr = this.arr.splice(0, 3)
        console.log(this.arr);
        // 手机信息
        this.resPhone = this.arr.filter(item => item.id == 2128)
        // console.log(this.resPhone);
        this.resPhone[0].children.forEach(item => {
            this.res1.push(...item.s_goods)
        })
        this.res1.splice(0, 6);
        // console.log(this.res1);
        // 电脑信息
        this.resComputer = this.arr.filter(item => item.id == 2129)
        // console.log(this.resComputer);
        this.resComputer[0].children.forEach(item => {
            this.res2.push(...item.s_goods)
        })
        this.res2.splice(0, 12);
        // console.log(this.res2);
        // 平板信息
        this.resFlat = this.arr.filter(item => item.id == 2130)
        // console.log(this.resFlat);
        this.resFlat[0].children.forEach(item => {
            this.res3.push(...item.s_goods)
        })
        this.res3.splice(0, 11);
        console.log(this.res3);
        this.res = [this.res1, this.res2, this.res3];
        console.log(this.res);

        // this.goods=classifyRes.data
        // 获取商品
        // let goodRes = await getGoods({
        //     project_id: 255,
        //     classify_id: this.ids,
        // })
        // // console.log(goodRes);
        // this.goods = goodRes.data.result.rows
        // console.log(this.goods);
    }
}

</script>

<style lang='scss' scoped>
@function vw($w) {
    @return ($w/1349) * 100+vw;
}

.swiper {
    width: 100%;
    height: vw(550);

    img {
        width: 100%;
        height: 100%;
    }
}

.product {
    width: vw(1349);
    background-color: rgb(226, 229, 231);
.box{
    .classify {
        width: vw(1200);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: vw(40) 0 vw(20) 0;

        h1 {
            font-size: vw(24);
            font-weight: 500;
        }
    }

    .content {
        width: vw(1200);
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .good {
            width: vw(291);
            height: vw(420);
            background-color: #fff;
            text-align: center;
            margin-bottom: vw(16);

            &:hover {
                box-shadow: 0px 0.5px vw(20) rgb(204, 202, 202);
            }

            img {
                width: vw(291);
                height: vw(254);
            }

            h3 {
                height: vw(26);
                font-weight: 400;
                font-size: vw(15);
                line-height: vw(26);
                margin: vw(10) vw(10) 0 vw(10);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            p:nth-of-type(1) {
                color: rgb(173, 172, 172);
                height: vw(25);
                font-size: vw(12);
                line-height: vw(25);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            p:nth-of-type(2) {
                color: red;
                font-size: vw(18);
                margin: 0 0 vw(15) 0;
            }

        }
    }
}
  


}
</style>
